<template>
	<view class="beans">
		<view class="navbar">
			<u-navbar title="幸运豆" :background="navbarBackground" back-icon-color="#fff" title-color="#fff" :border-bottom="false"></u-navbar>
		</view>
		
		<view class="topBox">
			<image class="bg" src="../static/incomeBg.png" mode="widthFix"></image>
		</view>
		
		<view class="card">
			<view class="tips">
				<u-icon name="info-circle" color="#fe0000" size="24"/>
				<text>兑换比例：100:1</text>
			</view>
			<view class="title">
				<u-icon class="icon" custom-prefix="custom-icon" name="bou" color="#fe0000" size="28"/>
				<text>幸运豆</text>
			</view>
			<view class="number">22346</view>
			<button type="default" class="btn" @click="exchangeShow = true">兑换现金</button>
		</view>
		
		<view class="record">
			<view class="title">
				<view class="text">兑换记录</view>
				<image class="titleBg" src="/pagesB/static/titleBg.png" mode="widthFix"></image>
			</view>
			<scroll-view scroll-y class="recordList">
				<view class="item flex_space_b" v-for="(item, index) in [0,1,2,3,4,5,6,7]" :key="index">
					<view class="left">
						<view class="title">兑换现金</view>
						<view class="time">2021-03-01 18:32</view>
					</view>
					<view class="right">-100</view>
				</view>
				<view class="noContent">
				  <image class="noContentImage" mode="widthFix" src="/static/noLive.png"></image>
				  <view class="text">没有相关内容</view>
				</view>
			</scroll-view>
		</view>
		
		<u-modal v-model="exchangeShow" title="兑换现金" :show-cancel-button="true" @confirm="exchangeConfirm" @cancel="exchangeCancel">
			<view class="exchange">
				<view class="label">兑换金额</view>
				<view class="amount flex_conter">
					<view class="icon">￥</view>
					<input type="number" class="input" v-model="exchangeNumber" placeholder="请输入数量" placeholder-style="font-size: 32rpx;" />
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				exchangeShow: false,
				exchangeNumber: null,
			}
		},
		methods: {
			exchangeConfirm () {
				console.log('点击了确认');
			},
			exchangeCancel () {
				console.log('点击了取消');
			}
		},
		computed:{
			navbarBackground: function () {
				if (this.scrollTop >= 40) {
					return { background: '#fe0000' }
				} else {
					return { background: 'rgba(254, 0, 0, ' + (0.02 * this.scrollTop) + ')' }
				}
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		}
	}
</script>

<style scoped lang="scss">
.beans {
	.navbar {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		width: 750rpx;
	}
	
	.topBox {
		position: relative;
		padding-top: 160rpx;
		.bg {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
			width: 750rpx;
		}
	}
	
	.card {
		margin: 24rpx 24rpx 0;
		padding: 52rpx 48rpx 32rpx;
		border-radius: 12rpx;
		background-color: #FFFFFF;
		box-shadow: 0 4rpx 8rpx rgba($color: #000000, $alpha: 0.2);
		position: relative;
		z-index: 4;
		.tips {
			position: absolute;
			top: 20rpx;
			left: 20rpx;
			font-size: 24rpx;
			color: var(--primaryColor);
		}
		.title {
			text-align: center;
			color: #fe0000;
		}
		.number {
			font-size: 48rpx;
			font-weight: bold;
			text-align: center;
			margin-top: 8rpx;
		}
		.btn {
			border-radius: 80rpx;
			margin: 28rpx 80rpx 0;
			color: #fff;
			font-size: 28rpx;
			background: var(--btnBgColor);
		}
	}
	
	.record {
		margin: 20rpx 24rpx 0;
		border-radius: 12rpx;
		background-color: #FFFFFF;
		box-shadow: 0 4rpx 8rpx rgba($color: #000000, $alpha: 0.2);
		position: relative;
		.title {
			position: relative;
			.text {
				font-size: 32rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 70rpx;
				position: relative;
				z-index: 2;
			}
			.titleBg {
				position: absolute;
				top: 0;
				left: 50%;
				z-index: 0;
				transform: translateX(-50%);
				width: 400rpx;
			}
		}
		.recordList {
			margin-top: 20rpx;
			height: calc(100vh - 600rpx);
			.item {
				padding: 20rpx;
				border-bottom: 1rpx solid #EEEEEE;
				.left {
					.title {
						font-size: 32rpx;
					}
					.time {
						font-size: 24rpx;
						color: #999999;
						margin-top: 8rpx;
					}
				}
				.right {
					font-size: 30rpx;
					font-weight: bold;
				}
			}
		}
	}
}

.exchange {
	padding: 48rpx 24rpx;
	.label {
		font-size: 32rpx;
	}
	.amount {
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eeeeee;
		.icon {
			font-size: 40rpx;
		}
		.input {
			flex: 1;
			height: 70rpx;
			font-size: 36rpx;
			margin-left: 12rpx;
		}
	}
}
</style>
